<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>24_函数-案例练习</title>
    </head>
    <body id="b">
        <button id="red">红色</button>
        <button id="green">绿色</button>
        <button id="blue">蓝色</button>
        <button id="yellow">黄色</button>


        <script>
            // var redButton = document.getElementById('red');
            var redButton = getButton('red');
            // var greenButton = document.getElementById('green');
            var greenButton = getButton('green');
            // var blueButton = document.getElementById('blue');
            var blueButton = getButton('blue');
            // var yellowButton = document.getElementById('yellow');
            var yellowButton = getButton('yellow');


            function getButton(btn){
                var button = document.getElementById(btn);
                return button;
            }


            var body = document.getElementById('b');

            redButton.onclick = function(){
                // body.style.backgroundColor = 'red';
                changeColor('red');
            }

            greenButton.onclick = function(){
                // body.style.backgroundColor = 'green';
                changeColor('green');
            }

            blueButton.onclick = function(){
                // body.style.backgroundColor = 'blue';
                changeColor('blue');
            }

            yellowButton.onclick = function(){
                // body.style.backgroundColor = 'yellow';
                changeColor('yellow');
            }

            function changeColor(c){
                body.style.backgroundColor = c;
            }


        </script>
    </body>
</html>